<template>
  <div class="pie-box" :id="chartId"></div>
</template>
<script setup lang="ts">
/**
 * set:(配置项){
 **************legend:(){type:,top:,left:,right:,bottom:,}
 **************series:(){top:,left:,right:,bottom:,}
 * }
 * data:(图表数据)
 * xData:X轴数据
 * chartId:(表格ID:'String')
 * title:表格头部名称
 */
import echarts from "@/plugins/echarts";
import {
nextTick,
onBeforeUnmount,
onMounted,
reactive,
watch
} from "vue";
const _chartsData: any = reactive({
  data: [],
  series: []
});
let myChart = null
const colorList = ['#4673e9']
let option = {
  legend: {
    type: 'scroll',
    orient: 'vertical',
    left: '60%',
    top: '15%',
    itemWidth: 16,
    icon: 'circle',
    align: 'left',
    itemHeight: 16,
    borderRadius: 8,
    bottom: 20,
    textStyle: {
      // 文字的样式
      fontSize: 14, // 可控制每个legend项的间距
      rich: {
        // 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
        name: {
          // 设置文字、数学、英语这一列的样式
          width: 100,
          color: "#666",
          fontSize: 14,
        },
        num: {
          // 设置10分、20分、30分这一列的样式
          width: 50,
          color: "#333",
          fontSize: 14,
          fontWeight: "bold",
          align:'right'
        },
        value: {
          // 设置百分比这一列的样式
          width: 40,
          color: "#333",
          fontSize: 14,
          fontWeight: "bold",
          align:'left'
        },
        gang: {
          // 设置百分比这一列的样式
          width: 10,
          color: "#333",
          fontSize: 14,
          fontWeight: "bold",
          align:'center'
        },
      },
    },
    formatter: function (name) {
      const item = option.series[0].data.find(item => item.name === name)
      if (name.length > 12)
        name = name.slice(0, 10) + '...'
      return `{name|${name}}   {num|${item.value||0}}{gang|/}{value|${item.percent}%}`
    }
  },
  tooltip: {
    trigger: "item",
    formatter: function (params) {
      return '<div style="text-align:left;display: flex;justify-content: space-between;">' + '<div>' + params.marker + ' ' + params.name + '</div>' + '<div style="margin-left:20px;">' + params.value  + '</div>' + '</div>'
    }
  },
  series: [
    {
      type: "pie",
      data: [],
      center: ['30%', '50%'],
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      labelLine: {
        show: false
      },
    }
  ],
};

const props = defineProps({
  set: {
    type: Array,
    default: () => {
      return [];
    },
  },
  data: {
    type: Array<any>,
    default: () => {
      return [];
    },
  },
  series: {
    type: Array<any>,
    default: () => [],
  },
  chartId: { type: String, default: "" },
  title: { type: String, default: "" },
}
)
const echartsResize = () => {
  myChart?.resize()
}
//生命周期
onMounted(() => {
  myChart = echarts.getInstanceByDom(document.querySelector('#' + props.chartId));
  myChart = echarts.init(document.getElementById(props.chartId));
  nextTick(() => {
    myChart.resize()
  })
  window.addEventListener("resize", echartsResize, false);
})
onBeforeUnmount(() => {
  myChart.dispose()
  window.removeEventListener("resize", echartsResize, false);
});
watch(
  () => props,
  () => {
    nextTick(() => {
      option.series[0].data = props.data
      myChart.setOption(option);
    })

  }, { deep: true, immediate: true }
);


</script>
<style lang="scss" scoped>
.pie-box {
  width: 100%;
  height: 100%;
}
</style>
